<template>
	<Layout>
		<!-- Page Header -->
		<header
			class="masthead"
			:style="{
				'background-image': `url(http://localhost:1337${$page.post.cover.url})`
			}"
		>
			<div class="overlay"></div>
			<div class="container">
				<div class="row">
					<div class="col-lg-8 col-md-10 mx-auto">
						<div class="post-heading">
							<h1>{{ $page.post.title }}</h1>
							<!-- 	<h2 class="subheading">Problems look mighty small from 150 miles up</h2> -->
							<span class="meta">
								Posted by
								<a href="#">{{ $page.post.created_by.firstname + ' ' + $page.post.created_by.lastname }}</a>
								{{ $page.post.created_at | filterDate }}
							</span>
						</div>
					</div>
				</div>
			</div>
		</header>

		<!-- Post Content -->
		<article>
			<div class="container">
				<div class="row">
					<div v-html="filterMd($page.post.content)" class="col-lg-8 col-md-10 mx-auto"></div>
				</div>
			</div>
		</article>
	</Layout>
</template>

<page-query>
query($id:ID!){
  post:strapiPost(id:$id){
    id
    title
    content
	created_by{
	  id
	  firstname
	  lastname
	}
	created_at
    cover{
      url
    }
    tags{
      id
      title
    }
  }
}
</page-query>

<script>
import Md from 'markdown-it';
import dayjs from 'dayjs';
const md = new Md()
export default {
	name: 'Post',
	filters: {
		filterDate(data) {
			return dayjs(data).format('YYYY-MM-DD HH:mm:ss');
		}
	},
	methods:{
		filterMd(data) {
			console.log(data)
			return md.render(data);
		}
	}
};
</script>

<style></style>
